<template>
  <div>
    <div class="block1">
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple-dark" style="font-size: 36px; color: #ff3833">客户统计</div>
        </el-col>
      </el-row>
    </div>
    <div class="block2">
      <el-container>
        <el-main></el-main>
        <el-header>
          <div class="block">
            <span class="demonstration">日期:</span>
            <el-date-picker
              v-model="value1"
              type="date"
              placeholder="选择日期"
              :picker-options="pickerOptions">
            </el-date-picker>
            <span class="demonstration">—</span>
            <el-date-picker
              v-model="value2"
              align="right"
              type="date"
              placeholder="选择日期"
              :picker-options="pickerOptions">
            </el-date-picker>
            <span class="demonstration">客户名称:</span>
            <el-select v-model="value3" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <span class="demonstration">是否退(付)款:</span>
            <el-select v-model="value3" placeholder="请选择">
              <el-option
                v-for="item in options1"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <el-button icon="el-icon-search" circle style="margin-left:20px "></el-button>
            <span class="demonstration">搜索</span>
          </div>
        </el-header>
      </el-container>
    </div>
    <div class="block3">
      <el-table
        max-height="300"
        v-loading="listLoading"
        :data="list"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
      >
        <el-table-column align="center" label="客户名称" width="95">
          <template slot-scope="scope">
          </template>
        </el-table-column>
        <el-table-column align="center" prop="created_at" label="日期" width="200">
          <template slot-scope="scope">
            <i class="el-icon-time"/>
            <span></span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="单号">
          <template slot-scope="scope">
          </template>
        </el-table-column>
        <el-table-column align="center" label="类型">
          <template slot-scope="scope">

          </template>
        </el-table-column>
        <el-table-column align="center" label="总金额">
          <template slot-scope="scope">

          </template>
        </el-table-column>
        <el-table-column label="操作员" width="110" align="center">
          <template slot-scope="scope">
            <span></span>
          </template>
        </el-table-column>
        <el-table-column label="备注" width="110" align="center">
          <template slot-scope="scope">

          </template>
        </el-table-column>
        <el-table-column class-name="status-col" label="退(付)款状态" width="110" align="center">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status | statusFilter">{{ scope.row.status }}</el-tag>
          </template>
        </el-table-column>

      </el-table>
    </div>
    <div class="block4">
      <el-table
        border
        max-height="300"
        v-loading="listLoading"
        :data="list"
        element-loading-text="Loading"
        fit
        highlight-current-row
      >
        <el-table-column align="center" label="商品编码" width="95">
          <template slot-scope="scope">

          </template>
        </el-table-column>
        <el-table-column align="center" label="商品名称">
          <template slot-scope="scope">

          </template>
        </el-table-column>
        <el-table-column align="center" label="商品型号">
          <template slot-scope="scope">

          </template>
        </el-table-column>
        <el-table-column align="center" label="单价">
          <template slot-scope="scope">

          </template>
        </el-table-column>
        <el-table-column align="center" label="数量">
          <template slot-scope="scope">

          </template>
        </el-table-column>
        <el-table-column align="center" label="单位">
          <template slot-scope="scope">

          </template>
        </el-table-column>
        <el-table-column align="center" label="总金额">
          <template slot-scope="scope">

          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import {getList} from '@/api/table'

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      //日期选择器
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      },
      value1: '',
      value2: '',
      //商品类别选择器
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      //退付款选择器
      options1: [{
        value: '选项1',
        label: '全部'
      }, {
        value: '选项2',
        label: '已付(退)'
      }, {
        value: '选项3',
        label: '未付(退)'
      },],
      value3: '',
      input: '',
      list: null,
      listLoading: true
    };
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      getList().then(response => {
        this.list = response.data.items
        this.listLoading = false
      })
    }
  }
};
</script>
<style>
.block1 {
  border-radius: 2px
}

.block2 {

}

.block3 {
  margin: 30px 30px 30px 30px;
}

.block4 {
  margin: 30px 30px 30px 30px;
}

.demonstration {
  font-size: 20px;
  margin: 0px 10px 0px 10px;
}

el-row {
  margin-bottom: 20px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

</style>
